<template>
	<view class="container">
		<uni-forms :modelValue="formData" label-width="100px" border>
			<template v-if="type == 1">
				<uni-forms-item required label="姓名" name="name">
					<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item required label="电话" name="phone">
					<uni-easyinput type="number" v-model="formData.phone" placeholder="请输入电话" />
				</uni-forms-item>
				<uni-forms-item required label="身份证号码" name="idcard">
					<uni-easyinput type="idcard" v-model="formData.idcard" placeholder="请输入身份证号码" />
				</uni-forms-item>
			</template>
			<uni-forms-item required label="问题类型" name="problemType">
				<uni-easyinput type="text" v-model="formData.problemType" placeholder="请输入问题类型" />
			</uni-forms-item>
			<uni-forms-item required label="问题属地" name="problemLocality">
				<uni-easyinput type="text" v-model="formData.problemLocality" placeholder="请输入问题属地" />
			</uni-forms-item>
			<uni-forms-item label="被举报人信息" name="reportedPersonInfo">
				<uni-easyinput type="textarea" v-model="formData.reportedPersonInfo" placeholder="请输入被举报人信息(如能确定具体被举报人，请填写被举报人的姓名、工作单位、职务、工号等;如无法确定具体被举报人可不填写)" />
			</uni-forms-item>
			<uni-forms-item required label="主要问题" name="mainProblem">
				<uni-easyinput type="textarea" v-model="formData.mainProblem" placeholder="反映的主要问题(具体事实描述)" />
			</uni-forms-item>
			<uni-forms-item label="图片资料" name="photoResource">
				<uni-file-picker limit="6" title="最多上传6张图片，仅限jpg、jpeg、png，单个文件大小不超过20MB"></uni-file-picker>
			</uni-forms-item>
			<uni-forms-item label="其他资料" name="otherResource">
				<uni-file-picker limit="5" file-mediatype="all" title="支持视频、音频、文档，最多上传5个附件，单个文件大小不超过50MB"></uni-file-picker>
			</uni-forms-item>
		</uni-forms>
		<view class="btn">
			<button type="default">提交</button>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	
	const formData = ref({})
	const type = ref(1)
	
	onLoad(options => {
		type.value = options.type
		console.log('type', type.value);
	})
	
	
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		box-sizing: border-box;
		padding: 20rpx 40rpx;
		/* 兼容 iOS 设备 */
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iPhone X 及以上设备 */
		padding-bottom: env(safe-area-inset-bottom);
		background:
			linear-gradient(to bottom, transparent, #eef1f4 100%),
			linear-gradient(to bottom, rgba(21, 87, 176, 1) 40%, rgba(0, 212, 255, 1));
	}
	
	.btn {
		padding-top: 40rpx;
		
		button {
			background-color: #2E80EE;
			color: #fff;
			width: 90%;
			height: 100rpx;
			line-height: 100rpx;
			border-radius: 100rpx;
		}
	}
	
	::v-deep {
		.uni-forms {
			box-sizing: border-box;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
		}
		.uni-forms-item {
			background-color: #fff !important;
		}
		
		button,
		button:hover,
		button:active {
			background-color: #2E80EE;
		}
	}
</style>